import React, { useState ,useEffect} from 'react'
import { Cell } from 'react-vant'
import { NotesO, ServiceO, UserCircleO, Arrow } from '@react-vant/icons';
// import Hoc from "../../component/Hoc"
import {useNavigate} from "react-router-dom"
type Props = {}

const My = (props: Props) => {
  const [flag, setFlag] = useState(false)
  const token = localStorage.getItem("token")
    const username = localStorage.getItem("username")
  const navigate = useNavigate()
  useEffect(() => {
      if (token) {
        setFlag(!flag)
      }
  }, []);
  const toloding = ()=>{
    navigate("/loding")
  }
  return (
    <div className='my'>
      <header>
        {
          flag ? <div className= "com1" >
            <div className="icon" >
              <p className='com1p1'><span className='span1'><UserCircleO color='#FFFFFF' /></span><span>{username}</span></p>
              <p className='com1p2'><span>切换账号</span><span><Arrow /></span></p>
            </div>
          </div> : <div className="com">
            <div className="icon">
              <UserCircleO color='#FFFFFF' />
            </div>
            <p onClick={toloding}><span>登录</span>/<span>注册</span></p>
          </div>
        }


      </header>
      <main>
        <div className="maincon">
          <Cell
            center
            title='常用联系人'
            icon={<NotesO />}
            isLink
            onClick={()=>navigate("/passengerList")}
          />
          <Cell
            center
            title='我的订单'
            icon={<NotesO />}
            isLink
            onClick={()=>navigate("/home/orderForGoods")}
          />
          <Cell
            center
            title='客服中心'
            icon={<ServiceO />}
            isLink
            onClick={()=>navigate("/home/customer")}
          />
        </div>

      </main>
    </div>
  )
}

export default My